<template>
	<view class="withdraw-page">
		<!-- 账户余额部分 -->
		<view class="account-balance">
			<text class="balance-label">账户余额</text>
			<text class="balance-amount">￥ {{balance}}</text>
		</view>
		<!-- 提现金额输入 -->
		<view class="form-item">
			<text class="form-label">提现金额</text>
			<input class="form-input" type="number" v-model="withdrawAmount" placeholder="请输入提现金额" />
			<text class="unit">元</text>
		</view>
		<!-- 输入真实姓名 -->
		<view class="form-item">
			<text class="form-label">真实姓名</text>
			<input class="form-input" type="text" v-model="realName" placeholder="请输入真实姓名" />
		</view>
		<!-- 选择银行 -->
		<view class="form-item">
			<text class="form-label">选择银行</text>
			<picker class="picker" :range="bankList" range-key="text" v-model="bank" @change="bankChange">
				<view class="picker-view">
					{{ bankList[bank] ? bankList[bank].text : '请选择银行' }}
				</view>
			</picker>
		</view>
		<!-- 输入银行卡号 -->
		<view class="form-item">
			<text class="form-label">银行卡号</text>
			<input class="form-input" type="number" v-model="bankNo" placeholder="请输入银行卡号" />
		</view>
		<!-- 信息安全提示 -->
		<view class="tip-text">
			该车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写
		</view>
		<!-- 错误提示 -->
		<view v-if="showError" class="error-tip">{{ errorMsg }}</view>
		<!-- 提交按钮 -->
		<button class="submit-btn" @click="submitWithdraw">确认信息并提交</button>
		<!-- 提现记录标题 -->
		<text class="record-title">提现记录</text>
		<!-- 提现记录列表 -->
		<view class="record-list">
			<view class="record-item" v-for="(item,index) in recordList" :key="index">
				<view class="record-left">
					<text class="record-type">{{item.type}}</text>
					<text class="record-time">{{item.time}}</text>
				</view>
				<view class="record-right">
					<text class="record-amount">- {{item.amount}}</text>
					<text class="record-status">{{item.status}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				balance: '',
				withdrawAmount: '',
				realName: '',
				bank: '',
				bankList: [{
						text: '中国建设银行',
						value: 0
					},
					{
						text: '中国农业银行',
						value: 1
					},
					{
						text: '中国银行',
						value: 2
					},
					{
						text: '中国工商银行',
						value: 3
					},
					{
						text: '中国邮政银行',
						value: 4
					}
				],
				bankNo: '',
				recordList: [{
						type: '商家提现申请',
						amount: '100.00',
						time: '时间:2022-10-12 11:09',
						status: '审核中'
					},
					{
						type: '商家提现申请',
						amount: '100.00',
						time: '时间:2022-10-12 11:09',
						status: '审核通过'
					},
					{
						type: '商家提现申请',
						amount: '100.00',
						time: '时间:2022-10-12 11:09',
						status: '审核不通过'
					}
				],
				errorMsg: '',
				showError: false
			}
		},
		methods: {
			bankChange(e) {
				this.bank = e.detail.value;
			},
			submitWithdraw() {
				if (this.withdrawAmount && this.balance && parseFloat(this.withdrawAmount) > parseFloat(this.balance)) {
					this.errorMsg = '提现金额不能大于账户余额';
					this.showError = true;
					setTimeout(() => {
						this.showError = false;
					}, 2000);
					return;
				}
				uni.navigateTo({
					url: '/pages/businessStatis/withdrawal/withdrawal'
				})
			}
		}
	}
</script>

<style scoped>
	.withdraw-page {
		padding: 20rpx;
	}

	.account-balance {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.balance-label {
		font-size: 32rpx;
		margin-left: 10rpx;
	}

	.balance-amount {
		margin-left: 80rpx;
		font-size: 32rpx;
		color: #ff5722;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.form-label {
		width: 180rpx;
		font-size: 30rpx;
		margin-left: 10rpx;
	}

	.form-input {
		flex: 1;
		height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		padding-left: 10rpx;
	}

	.unit {
		margin-left: 10rpx;
		font-size: 30rpx;
	}

	.picker {
		flex: 1;
	}

	.picker-view {
		font-size: 30rpx;
		color: #a6a6a6;
		height: 80rpx;
		line-height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
	}

	.tip-text {
		font-size: 26rpx;
		color: #999;
		margin-bottom: 40rpx;
		text-align: center;
	}

	.submit-btn {
		width: 50%;
		height: 90rpx;
		background-color: #007AFF;
		color: #fff;
		font-size: 32rpx;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.error-tip {
		color: red;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}

	.record-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.record-list {
		border-top: 1px solid #eee;
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.record-left {
		display: flex;
		flex-direction: column;
	}

	.record-type {
		font-size: 14px;
		color: #333;
	}

	.record-time {
		font-size: 12px;
		color: #999;
		margin-top: 2px;
	}

	.record-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.record-amount {
		font-size: 14px;
		color: #f00;
	}

	.record-status {
		font-size: 12px;
		color: #999;
		margin-top: 2px;
	}
</style>